<template>
  <PageWrapper :contentStyle="{ height: 'calc(100vh - 105px)' }">
    <div ref="wrapperRef" :class="prefixCls">
      <Tabs tab-position="left" :tabBarStyle="tabBarStyle" :tabBarGutter="5">
        <template v-for="item in settingList" :key="item.key">
          <TabPane :tab="item.name">
            <component :is="item.component" />
          </TabPane>
        </template>
      </Tabs>
    </div>
  </PageWrapper>
</template>

<script lang="ts">
  import { PageWrapper } from "/@/components/Page"
  import { defineComponent } from "vue"
  import { Tabs } from "ant-design-vue"

  import { ScrollContainer } from "/@/components/Container/index"
  import { settingList } from "./data"

  import BaseSetting from "./BaseSetting.vue"
  import SecureSetting from "./SecureSetting.vue"
  import AccountBind from "./AccountBind.vue"
  import MsgNotify from "./MsgNotify.vue"

  export default defineComponent({
    components: {
      ScrollContainer,
      Tabs,
      TabPane: Tabs.TabPane,
      BaseSetting,
      SecureSetting,
      AccountBind,
      MsgNotify,
      PageWrapper,
    },
    setup() {
      return {
        prefixCls: "account-setting",
        settingList,
        tabBarStyle: {
          width: "160px",
        },
      }
    },
  })
</script>
<style lang="less">
  .account-setting {
    // padding: 5px;
    background-color: @component-background;

    .base-title {
      padding-left: 0;
    }

    .ant-tabs-tab-active {
      background-color: @item-active-bg;
    }
  }
</style>
